<template>
  <van-popup
    get-container="#app"
    :value="value"
    @input="$emit('input', $event)"
    @open="isReport = false"
  >
    <van-cell-group v-if="!isReport">
      <van-cell @click="disLike" icon="closed-eye">不感兴趣</van-cell>
      <van-cell is-link @click="isReport = true">反馈垃圾内容</van-cell>
      <van-cell>拉黑作者</van-cell>
    </van-cell-group>
    <van-cell-group v-else>
      <van-cell icon="arrow-left" @click="isReport = false">返回</van-cell>
      <van-cell
        @click="report(item.value)"
        icon="info-o"
        :key="item.value"
        v-for="item in reports"
        >{{ item.label }}</van-cell
      >
    </van-cell-group>
  </van-popup>
</template>

<script>
import { disLikeById, reportById } from '@/api/article'
import { reports } from '@/api/constants'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    // 文章ID
    articleId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // 是否显示上报垃圾内容
      isReport: false,
      // 举报类型
      reports
    }
  },
  methods: {
    // 不感兴趣
    async disLike () {
      console.log('dislike:', this.articleId)
      const { status } = await disLikeById(this.articleId)
      if (status === 201) {
        this.$toast.success('操作成功！')
        // 关闭浮层
        this.$emit('input', false)
        // 通知父组件删除当前文章
        this.$emit('on-dislike')
      }
    },
    // 举报
    async report (type) {
      try {
        const { status } = await reportById(this.articleId, type)
        if (status === 201) {
          this.$toast.success('举报成功！')
          // 关闭浮层
          this.$emit('input', false)
          // 通知父组件删除当前文章
          this.$emit('on-report')
        }
      } catch (e) {
        // console.log(e)
        if (e.response.status === 409) {
          return this.$toast.fail('已经举报过了！')
        }
        this.$toast.fail('举报失败！')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.van-popup {
  width: 80%;
  border-radius: 4px;
}
</style>
